/* 重置样式 */
* {
  box-sizing: border-box;
}

html {
  height: 100%;
  font-size: 14px;
}

body {
  height: 100%;
  color: #333;
  /* 考虑使用媒体查询来处理小屏幕设备的最小宽度 */
  min-width: 1240px;
  font: 1em/1.4 'Microsoft YaHei', 'PingFang SC', 'Avenir', 'Segoe UI',
    'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei',
    sans-serif;
}

/* 使用通配符选择器来统一重置内外边距 */
body,
ul,
h1,
h3,
h4,
p,
dl,
dd,
a,
i {
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
  color: #333;
  outline: none;
}

i {
  font-style: normal;
}

/* 改进input样式 */
input[type='text'],
input[type='search'],
input[type='password'],
input[type='checkbox'] {
  padding: 0;
  outline: none;
  border: none;
  -webkit-appearance: none;

  /* 使用属性选择器来添加placeholder颜色 */
  ::-webkit-input-placeholder {
    color: #ccc;
  }

  :-moz-placeholder {
    /* Firefox 18- */
    color: #ccc;
  }

  ::-moz-placeholder {
    /* Firefox 19+ */
    color: #ccc;
  }

  :-ms-input-placeholder {
    /* IE 10+ */
    color: #ccc;
  }
}

img {
  width: auto;
  height: auto;
  display: block;
  /* 如果需要去除底部间隙（由行内元素产生的） */
}

ul {
  list-style: none;
}

#app {
  user-select: none;
}

.container {
  width: 1240px;
  margin: 0 auto;
  position: relative;

  /* 添加媒体查询来处理小屏幕设备 */
  @media (max-width: 1239px) {
    width: 100%;
    padding: 0 15px;
    /* 可选：添加水平内边距以在小屏幕上提供空间 */
  }
}

.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ellipsis-2 {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

/* 使用更现代的clearfix方法 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* 重置Element UI组件样式（注意：你可能需要更具体的选择器来避免全局污染）*/
.el-breadcrumb__inner.is-link {
  font-weight: 400;
  /* 移除!important，除非真的必要 */
}

.icon {
  width: 4em;
  height: 4em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}